<template>
    <div>
        <div class="avatar">
            <div class="avatar_box">
                <div> <el-avatar :size="65" :src="avatar"></el-avatar></div>
                <div class="a_txt">
                    <div style="margin-bottom: 11px;">{{ user }}</div>
                    <div>{{ phone }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: '',
    data() {
        return {
            circleUrl: require('@/assets/images/profile.jpg'),
            media: require('@/assets/images/xinmeiti.png'),
            kepu: require('@/assets/images/kepu.png'),
            user:'',
        }
    },
    created() {
        this.getRoles()
    },
    methods: {
       async getRoles() {  //不同角色不同名称
          //  console.log(await this.$store.dispatch('userRole'));
          this.user = await this.$store.dispatch('userRole')
          //  return await this.$store.dispatch('userRole')
        }
    },
    computed: {
        phone(){
            return  this.$store.state.user.phone.slice(0,3) + '****' +this.$store.state.user.phone.slice(7,11)
        },
        avatar(){
            return  this.$store.state.user.avatar
        }
    }
}
</script>

<style lang='scss' scoped>
.avatar {
    display: flex;

    .avatar_box:nth-child(1) {
        width: 344px;
        display: flex;
        align-items: center;
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        color: #3D3D3D;
        line-height: 22px;
        padding: 52px 0 63px 80px;
        border-right: 1px solid #f5f5f5;

        .a_txt {
            display: flex;
            flex-direction: column;
            padding-left: 20px;
        }
    }

    .avatar_box:nth-child(2) {
        width: 344px;
        display: flex;
        align-items: center;
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 700;
        color: #3D3D3D;
        line-height: 22px;
        padding: 52px 0 63px 80px;
        border-right: 1px solid #f5f5f5;

        .a_txt {
            display: flex;
            flex-direction: column;
            margin-right: 32px;
        }
    }

    .avatar_box:nth-child(3) {
        width: 344px;
        display: flex;
        align-items: center;
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 700;
        color: #3D3D3D;
        line-height: 22px;
        padding: 52px 0 63px 80px;

        .a_txt {
            display: flex;
            flex-direction: column;
            margin-right: 32px;
        }
    }

}
</style>